<template>
 <div class="publishBox">
   <div class="publishInfo" v-show="!isHide">
      <span class="leftinfo"></span>
      <div
        class="rightInfo"
        :style="{
          fontSize: $attrs.fontSizeModule,
          color: $attrs.backColorModule,
          fontWeight: $attrs.boldModule ? 'bold' : 'normal',
          fontStyle: $attrs.italicModule ? 'italic' : 'normal',
          textDecoration: $attrs.underlineModule ? 'underline' : 'none',
          textAlign: $attrs.textAlignModule,
          lineHeight: $attrs.lineHeightModule,
        }"
           >
        {{ moduleName }}
      </div>
   </div>
   <div class="publishScroll">
     <img :src="iconimg" class="scrollIcon" alt="" v-show="iconid===2">
   <img :src="defaultIcon" alt="" v-show="iconid===1" class="scrollIcon">
     <div class="scrollText">
      <ul class="textList" ref="messageobj" :style="{flexDirection:scrollDirection,height:'30px'}">
        <li v-for="item in publishList" :key="item.valid" ref="messageinfo">
        <div :style="{paddingBottom:scrollDirection==='column'?'20px':'0px',lineHeight:'30px',height:'30px',
        color:setType===1?item.backColor:$attrs.backColorGetText,
        fontSize:setType===1?item.fontSize:$attrs.fontSizeGetText,
        fontWeight:setType===1?(item.bold ? 'bold' : 'normal'):($attrs.boldGetText ? 'bold' : 'normal'),
        textDecoration:setType===1?(item.underline ? 'underline' : 'none'):($attrs.underlineGetText ? 'underline' : 'none'),
        fontStyle:setType===1?(item.italic ? 'italic' : 'none'):($attrs.italicGetText ? 'italic' : 'none')}" class="pubTextCent">{{item.contentDisplay}}</div>
        </li>
      </ul>
     </div>
   </div>
 </div>
</template>
<script>
import {getWordList} from '@/api/mobile/wordSwipe.js';
import {getMyMessage} from "@/api/custom/message";
export default {
  name:'wordSwipe',
  props:['moduleName','setType','isHide','iconimg','heightSet','colorSet','moduleList','scrollDirection','colorSetid','iconid','heightSetid','colorSetid2'],
  data(){
    return {
        marginInfo:0,
        scrollObj:null,
        defaultIcon:require('@/assets/images/laba.png'),
        publishList:[],
        publen:0
    }
  },
  watch:{
    setType:{
      handler(val){
        if(val===1){
         this.publishList = this.moduleList;
        setTimeout(()=>{
          this.scrollHandle();
        },100)
        }else{
this.getWordList();
        }
        
      },
      immediate:true
    },
    moduleList:{
      handler(val,oldval){
        if(this.setType === 1){
          this.publishList = val;
          this.$nextTick(()=>{
          this.scrollHandle();
        })
        }
      },
      deep:true
    }
  },
  created(){
    
  },
  mounted(){
    this.publen = this.$refs.messageobj.offsetWidth;
    
  },
  methods:{
    getWordList(){
      let params = {
        pageNo: 1,
        pageSize:49,
        value: "",
        statusList: '',
          types: [1,4],
          sortord: 'DESC',
      };
      getMyMessage(params).then(res=>{
      if(res.code===0){
        this.publishList = res.data.list.length?res.data.list:[{title:'',contentDisplay:''}];
      }else{
        this.publishList = [{title:'',contentDisplay:''}];
      }
 this.$nextTick(()=>{
          this.scrollHandle();
        })
     })
    },
    scrollHandle(){
      clearInterval(this.scrollObj);
      let forward = this.scrollDirection==='row'?'marginLeft':'marginTop';
       
       let objul = this.$refs.messageobj;
    let obj = this.$refs.messageinfo[0];
    if(obj){
      let child = obj.children[0];
   
   let w = this.scrollDirection==='row'? child.offsetWidth: child.offsetHeight;
   let m;
  
   if(this.scrollDirection==='row'){
    let t = w%this.publen - this.publen/2;
    let f = Math.ceil(w/this.publen) * this.publen;
    if(t>0){
     f+=t;
    }
    obj.style.width = f + 'px';
    // this.$forceUpdate();
     m = this.scrollDirection==='row'? obj.offsetWidth: obj.offsetHeight;
    
   }
   
   let leftinfo = 0;
   let n = false;
   objul.style['marginLeft'] = '0px';
   objul.style['marginTop'] = '0px';
 this.scrollObj =  setInterval(()=>{
    leftinfo-=1;
    if(Math.abs(leftinfo) >= 10 && !n){
     let tobj = JSON.parse(JSON.stringify(this.publishList[0]));
     tobj.valid = Date.now();
      this.publishList.push(tobj);
     //  clearInterval(this.scrollObj);
      this.$forceUpdate();
        n = true;
    }
    if(Math.abs(leftinfo) >= m){
     this.publishList.shift();
     this.$forceUpdate();
     this.$nextTick(()=>{
      this.scrollHandle();
     })
   }
    objul.style[forward] = leftinfo + 'px';
   },50)
    }
   
    }
  },
  destroyed(){
    clearInterval(this.scrollObj);
    this.scrollObj = null;
  }
}
</script>
<style scoped lang="less">
.publishBox{
  .publishInfo{
    display:flex;
    flex-wrap: nowrap;
    margin:15px 10px;
    .leftinfo{
      width:3px;
      background:#1890FF;
      flex:none;
    }
    .rightInfo{
      flex:1;
      word-break: break-all;
      font-weight: bold;
      margin-left:6px;
      font-size: 16px;
    }
  }
  .publishScroll{
    display:flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-left:10px;
    .scrollIcon{
      width:20px;
      height:20px;
      flex:none;
      margin-right:6px;
    }
    .scrollText{
      flex:1;
      overflow: hidden;
      height:30px;
      .textList{
        width:100%;
        margin:0;
        padding:0;
        display:flex;
        color:#7B7B7B;
        li{
          width:100%;
          flex:none;
          display:flex;
          align-items: center;
        }
        .pubTextCent{
            white-space: nowrap;
           }
      }
    }
  }
}
</style>
